<template>
  <view class="page-wrapper" :class="customClass" :style="{ paddingTop: menuTop + 'px' }">
    <view class="page-title" :style="{ height: menuHeight + 'px', lineHeight: menuHeight + 'px' }">
      <view
        v-if="showGoHome"
        class="go-home-btn"
        :style="{ top: menuTop + 'px' }"
        @click="goHome()"
      >
        <!-- <image src="@/assets/images/home_icon.png" style="height: 40rpx; width: 40rpx" /> -->
      </view>
      <text>{{ pageTitle }}</text>
    </view>
    <view class="title-bar" v-if="title">
      <slot name="titleBar"></slot>
    </view>
    <scroll-view
      class="page-content"
      :style="{ height: pageContentHeight }"
      scroll-y
      @scrolltolower="scrolltolower"
      @scrolltoupper="scrolltoupper"
    >
      <slot></slot>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, PropType } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { redirectNameTo } from '@/utils/utils';
defineProps({
  pageTitle: {
    type: String,
    required: true,
  },
  showGoHome: {
    type: Boolean,
    default: true,
  },
  customClass: {
    type: [String, Array, Object],
    default: '',
  },
  title:{
    type:Boolean,
    default:true
  }
});
const emit = defineEmits(['scrolltolower', 'scrolltoupper']);
const menuTop = ref(0);
const menuHeight = ref(0);
const winHeight = ref(0);

const pageContentHeight = computed(() => {
  // console.log(winHeight.value, menuTop.value, menuHeight.value);
  let a = winHeight.value - (menuTop.value + menuHeight.value) - uni.upx2px(136);
  return a + 'px';
});

onReady(() => {
  const menuInfo = uni.getMenuButtonBoundingClientRect();
  menuTop.value = menuInfo.top;
  menuHeight.value = menuInfo.height;
  const { windowHeight } = uni.getWindowInfo();
  winHeight.value = windowHeight;
});

const scrolltolower = (e: any) => {
  emit('scrolltolower', e);
};
const scrolltoupper = (e: any) => {
  emit('scrolltoupper', e);
};
const goHome = () => {
  const routes = getCurrentPages();
  console.log('😁 ~ file: ListPageFrame.vue:74 ~ routes', routes);
  if (routes.length > 1) {
    console.log('back');
    uni.navigateBack();
  } else {
    redirectNameTo('home');
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  // background-color: #F7FAFC;
  // background-image: url(http://wxs.chinabulker.com/public/wxgdt/img/48a0a08e.png);
  // background-size: contain;
  // background-repeat: no-repeat;
}
.page-title {
  color: white;
  text-align: center;
}
.page-content {
  background-color: #F7FAFC;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.title-bar {
  box-sizing: content-box;
  // padding-top: 36rpx;
  height: 100rpx;
}
</style>
